<template>
  <div style="margin: auto;">
    <el-card style="height: 100vh;padding: 10px;">
      <div class="header">
        授权并发布小程序
      </div>
      <!-- 内容部分start -->
      <div class="content">
        <!-- 第一个 -->
        <!-- <div class="contentFist">
          <div>
            <div class="title">
              <span class="spanNum">1</span>
              <span>绑定小程序appid</span>
            </div>
            <div class="detail">查看小程序appid <el-button type="text"><a>教程</a></el-button></div>
          </div>
          <div class="btnLeft">
            <el-button class="btn" type="primary" @click="">绑定</el-button>
          </div>
        </div> -->
        <!-- 第二 -->
        <div class="contentFist">
          <div>
            <div class="title">
              <span class="spanNum">1</span>
              <span>立即授权</span>
            </div>
            <div class="detail">
              <div>使用微信小程序管理员账号登录并扫码，在授权过程中，请勾选所有权限确保小程序能完整使用</div>
              <div>如未注册，请前往 <el-button type="text"><a href="https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html" target="_blank">注册</a></el-button>
              </div>
            </div>
          </div>
          <div class="btnLeft">
            <el-button class="btn" type="primary" @click="startAuth">{{authName}}</el-button>
            <div v-if="lookAuthMsg">
              <el-button class="btn" type="text" @click="showAuthMsgTan">查看授权信息</el-button>
            </div>
          </div>
        </div>
        <!-- 第三 -->
        <div class="contentFist">
          <div>
            <div class="title">
              <span class="spanNum">2</span>
              <span>设置小程序支付方式</span>
            </div>
            <div class="detail">
              <div>请前往微信官方平台将商户号与小程序关联，查看关联 <el-button type="text"><a href="https://kf.qq.com/faq/180910QZzmaE180910vQJfIB.html"
                    target="_blank">教程</a></el-button> ，关联成功后，请提供商户号和API密钥实现微信支付功能</div>
            </div>
          </div>
          <div class="btnLeft">
            <el-button class="btn" type="primary" :loading="loadingBtn" @click="setWxappPayTan"><span v-if="finishSet">已</span>设置</el-button>
          </div>
        </div>
        <!-- 第四 -->
        <div class="contentFist">
          <div>
            <div class="title">
              <span class="spanNum">3</span>
              <span>完成所有准备工作，等待审核并发布小程序</span>
            </div>
            <div class="detail">
              <div>提交微信审核（最长14个工作日，一般当天/次日能完成审核），审核通过后即可立即发布版本</div>
              <div>
                <el-steps :active="active" finish-status="success" :align-center="true" process-status="wait" :simple="false"
                  style="margin-top: 20px">
                  <el-step title="授权"></el-step>
                  <el-step title="待提交审核"></el-step>
                  <el-step title="审核中"></el-step>
                  <el-step title="待发布"></el-step>
                  <el-step title="已发布"></el-step>
                </el-steps>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容部分end -->

    </el-card>
    <!-- 模态款 -->
    <!-- 查看授权信息 -->
    <!-- 添加模态款 -->
    <el-dialog  class="msgDiv" title="查看授权信息" :close-on-click-modal="false" :visible.sync="showAuthMsg">
      <div>
        <!-- <h3>店铺基础信息</h3> -->
        <div style="margin-left: 20px;margin-top: -15px;font-size: 16px;">
          <div>
            <div style="margin-left: -35px;text-align: center;font-size: 20px;font-weight: bold;">小程序帐号信息</div>
            <div class="msgCss">
              <div>名称：</div>
              <div>{{authorizer_infoList.nick_name}}</div>
            </div>
            <div class="msgCss">
              <div>头像：</div>
              <div><img style="width: 100%;" :src="authorizer_infoList.head_img" /></div>
            </div>
            <div class="msgCss">
              <div>公众号类型：</div>
              <div v-if="service_type_info.id==0">订阅号</div>
              <div v-if="service_type_info.id==1">由历史老账号升级后的订阅号</div>
              <div v-if="service_type_info.id==2">服务号</div>
            </div>
            <div class="msgCss">
              <div>小程序认证类型：</div>
              <div v-if="verify_type_info.id==-1">未认证</div>
              <div v-if="verify_type_info.id==0">微信认证</div>
              <!-- <div v-if="authorizer_infoList.verify_type_info.id==1">新浪微博认证</div>
            <div v-if="authorizer_infoList.verify_type_info.id==2">腾讯微博认证</div>
            <div v-if="authorizer_infoList.verify_type_info.id==3">已资质认证通过但还未通过名称认证</div>
            <div v-if="authorizer_infoList.verify_type_info.id==4">已资质认证通过、还未通过名称认证，但通过了新浪微博认证</div>
            <div v-if="authorizer_infoList.verify_type_info.id==5">已资质认证通过、还未通过名称认证，但通过了腾讯微博认证</div> -->
            </div>
            <div class="msgCss">
              <div>原始ID：</div>
              <div>{{authorizer_infoList.user_name}}</div>
            </div>
            <div class="msgCss">
              <div>主体名称：</div>
              <div>{{authorizer_infoList.principal_name}}</div>
            </div>
            <div >
              <div style="margin-top: 10px;">账号介绍：</div>
              <div class="msgCss" style="width: 60%;margin-left: 20px;">{{authorizer_infoList.signature}}</div>
            </div>
            <div>
              <div style="margin-top: 10px;">开通状况：</div>
              <div style="margin-left: 20px;">
                <div class="msgCss">
                  <div>1.是否已开通微信门店功能：</div>
                  <div v-if="business_info.open_store==0">否</div>
                  <div v-if="business_info.open_store==1">是</div>
                </div>
                <div class="msgCss">
                  <div>2.是否已开通微信扫商品功能：</div>
                  <div v-if="business_info.open_scan==0">否</div>
                  <div v-if="business_info.open_scan==1">是</div>
                </div>
                <div class="msgCss">
                  <div>3.是否已开通微信支付功能：</div>
                  <div v-if="business_info.open_pay==0">否</div>
                  <div v-if="business_info.open_pay==1">是</div>
                </div>
                <div class="msgCss">
                  <div>4.是否已开通微信卡券功能：</div>
                  <div v-if="business_info.open_card==0">否</div>
                  <div v-if="business_info.open_card==1">是</div>
                </div>
                <div class="msgCss">
                  <div>5.是否已开通微信摇一摇功能返回码说明：</div>
                  <div v-if="business_info.open_shake==0">否</div>
                  <div v-if="business_info.open_shake==1">是</div>
                </div>
              </div>
            </div>
           <!-- <div class="msgCss">
              <div>二维码：</div>
              <div><img style="width: 100%;" :src="authorizer_infoList.qrcode_url" /></div>
            </div> -->
            <div>
              <div style="margin-top: 10px;">小程序配置：</div>
              <div class="msgCss"  style="margin-left: 20px;">
                <div>1.小程序配置的合法域名：</div>
                <div>{{RequestDomain[0]}}</div>
              </div>
              <div>
                <div  style="margin-left: 20px;margin-top: 10px;">2.小程序配置的类目信息：</div>
                <div class="msgCss"  style="margin-left: 20px;margin-top: 10px;">
                  <table style="border: 1px solid #bbb;padding: -40px;">

                    <div v-for="(cate,index) in MiniProgramInfo.categories" :key="index">
                      <th>{{cate.first}}:</th>
                      <td>{{cate.second}}</td>
                    </div>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 授权信息 -->
          <div style="margin-bottom: 25px;margin-top: 20px;">
            <div style="text-align: center;font-size: 20px;font-weight: bold;">授权信息</div>
            <div class="msgCss">
              <div>授权方appid：</div>
              <div>{{authorization_info.authorizer_appid}}</div>
            </div>
            <!-- <div class="msgCss">
              <div>刷新令牌：</div>
              <div>{{authorization_info.authorizer_refresh_token}}</div>
            </div> -->
          </div>
          <div style="text-align: center;margin-bottom: -10px;">
            <el-button type="primary" @click="showAuthMsg=false">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 设置小程序支付方式 -->
    <el-dialog style="width: 50%;margin: auto;" title="设置小程序支付方式" :close-on-click-modal="false" :visible.sync="setPaymentModel">
      <div>
        <div>
          <el-form ref="form" label-width="120px">
            <el-form-item label="商户号ID(必填)" :required="true">
              <div style="display: flex;">
                <el-input v-model="mch_id" :disabled="disabledOne" placeholder="请输入微信支付商户号"></el-input>
                <el-button v-if="showbtn" @click="clickBtn" style="margin: auto;margin-left: 10px;height: 30px;" type="infor"
                  size="mini">修改</el-button>
                <div v-else style="width: 56px;height: 30px;margin: auto;margin-left: 20px;height: 30px;" type="infor"
                  size="mini"></div>
              </div>
            </el-form-item>
            <el-form-item label="API密钥(必填)" :required="true">
              <div style="display: flex;">
                <el-input v-model="key" :disabled="disabledOne" placeholder="请输入api密钥"></el-input>
                <!-- 占位 -->
                <div style="width: 56px;height: 30px;margin: auto;margin-left: 20px;height: 30px;" type="infor" size="mini"></div>
              </div>
            </el-form-item>
            <div style="text-align: left;">
              <el-form-item label="证书文件" style="color: black;">
                <el-tooltip placement="top">
                  <div slot="content">微信退款功能需要提供证书</div>
                  <i class="el-icon-info" style="font-size: 18px;"></i>
                </el-tooltip>

                <el-upload
                  class="upload-demo"
                  :action="`${this.$api.baseUrl}wechatthird/uploadCert/`" name='file'
                   :on-success="handleAvatarSuccessCert"
                  :file-list="fileList1" :limit="1" :on-exceed="onexceed">
                  <el-button size="small" type="primary">点击上传含cert的pem文件</el-button>

                </el-upload>
                 <div v-if="showCertName">certName:{{wechatpay_certificate_cert_name}}</div>
                <el-upload
                  class="upload-demo"
                  :action="`${this.$api.baseUrl}wechatthird/uploadKey/`" name='file'
                   :on-success="handleAvatarSuccessKey"
                  :file-list="fileList2"  :limit="1" :on-exceed="onexceed">
                  <el-button size="small" type="primary">点击上传含key的pem文件</el-button>
                </el-upload>
                <div v-if="showKeyName">keyName:{{wechatpay_certificate_key_name}}</div>
              </el-form-item>
            </div>
          </el-form>
          <div style="text-align: center;">
            <el-button type="success" @click="setWechatPayConfig">设置</el-button>

          </div>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        mch_id: '',
        key: '',
        cart_file_id:"",
        key_file_id:"",
        wechatpay_certificate_cert_name:"584848",
        wechatpay_certificate_key_name:"",
        active: 0,
        disabledOne: false, //禁止输入
        showbtn: false, //修改按钮
        setPaymentModel: false, //设置支付model
        loadingBtn: false,
        user_token: "",
        authName: "开始授权",
        showAuthMsg: false,
        lookAuthMsg: false,
        authorizer_infoList: [],
        service_type_info: [],
        verify_type_info: [],
        business_info: [],
        MiniProgramInfo: [],
        authorization_info:[],
        RequestDomain: [],
        fileList1:[],
        fileList2:[],
        showCertName:false,
        showKeyName:false,
        finishSet:false
      }
    },

    mounted() {
      this.user_token = window.localStorage.getItem("user_token")
      this.checkAuthorizeStatus()
      this.checkAuthorizeInfo()
    },
    methods: {
      onexceed(files, fileList){
        if(files.length==1){
            this.$message.error("只能上传一个文件哦")
            return false
        }

      },
      //Key的文件上传
      handleAvatarSuccessKey(res, file){
        if(res.level=="success"){
          this.showKeyName = false
           this.key_file_id = res.data.id
        }else{
          this.$message.error(res.message)
          return false
        }
      },
      //Cert的文件上传
      handleAvatarSuccessCert(res, file) {
        if(res.level=="success"){
          this.showCertName = false
           this.cart_file_id = res.data.id
        }else{
          this.$message.error(res.message)
          return false
        }

      },
      showAuthMsgTan() {
        this.showAuthMsg = true
      },
      //获取授权信息
      checkAuthorizeInfo() {
        this.$api.checkAuthorizeInfo().then(res => {
          if(res.data.data.length==0){
            return false
          }
          this.authorizer_infoList = res.data.data.authorizer_info
          this.service_type_info = res.data.data.authorizer_info.service_type_info
          this.verify_type_info = res.data.data.authorizer_info.verify_type_info
          this.business_info = res.data.data.authorizer_info.business_info
          this.MiniProgramInfo = res.data.data.authorizer_info.MiniProgramInfo
          this.RequestDomain = res.data.data.authorizer_info.MiniProgramInfo.network.RequestDomain
          this.authorization_info = res.data.data.authorization_info

          if (res.data.level == "error" && res.data.message == "未授权") {
            this.authName = "开始授权"
            this.lookAuthMsg = false
          } else if (res.data.level == "success" && res.data.message == "success") {
            this.authName = "重新授权"
            this.lookAuthMsg = true
          }
        })
      },
      //获取授权状态
      checkAuthorizeStatus() {
        this.$api.checkAuthorizeStatus().then(res => {
          this.active = parseInt(res.data.data.status)
        })
      },
      clickBtn() {
        this.showbtn = false
        this.disabledOne = false

      },
      //授权
      startAuth() {
        open(this.$api.baseUrl+'wechatthird/getPreAuthorizationPage?merchant_token=' + this.user_token,
          '_blank')
      },
      //设置支付方式弹窗
      async setWxappPayTan() {
        this.loadingBtn = true
        await this.getWechatPayConfig()
        this.fileList1=[]
        this.fileList2=[]
        this.setPaymentModel = true
        if (this.mch_id != "" || this.key != "") {
          this.disabledOne = true //显示禁止输入
          this.showbtn = true //显示修改按钮
        } else {

        }
      },
      //设置小程序支付方式
      setWechatPayConfig() {
        let params = {
          "mch_id": this.mch_id,
          "key": this.key,
          "cart_file_id":this.cart_file_id,
          "key_file_id":this.key_file_id
        }
        const loadingOne = this.$loading({
          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$api.setWechatPayConfig(params).then(res => {
          this.$message({
            type: res.data.level,
            message: res.data.message
          });
          if (res.data.level == "success") {
            loadingOne.close()
            this.setPaymentModel = false
          } else {
            loadingOne.close()
          }
        })
      },
      async getWechatPayConfig() {
        await this.$api.getWechatPayConfig().then(res => {
          console.log(res)
          if (res.data.level == "success" && res.data.data != null) {
            this.finishSet = true
            this.mch_id = res.data.data.wechatpay_mchid
            this.key = res.data.data.wechatpay_key
            if(res.data.data.wechatpay_certificate_cert_name !=""){
              this.wechatpay_certificate_cert_name = res.data.data.wechatpay_certificate_cert_name
              this.showCertName = true
            }
            if(res.data.data.wechatpay_certificate_key_name !=""){
              this.wechatpay_certificate_key_name = res.data.data.wechatpay_certificate_key_name
              this.showKeyName = true
            }

          }
          this.loadingBtn = false
        })
      }
    }

  }
</script>
<style scoped="scoped">
  .header {
    font-size: 20px;
    font-weight: bold;
  }
  /deep/.el-dialog{
    width: 75%;
    margin-top: 15vh !important;
    margin-bottom: 5px;
  }
  .content {
    width: 70%;
    margin: 25px;
  }

  .contentFist {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .spanNum {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 20px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid black;
  }

  .detail {
    font-size: 15px;
    margin-top: 10px;
    margin-left: 50px;
    color: #BBBBBB;
  }

  .btnLeft {
    margin-left: 50px;
  }

  .btn {
    width: 120px;
    border-radius: 6px;
    /* background-color: #169bd5c9;
    border-color: #169bd5c9; */
  }

  .msgCss {
    display: flex;
    margin-top: 10px;
   /* padding: 20px; */
  }
  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .deleteClass {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 16px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #00000066;
    color: #e4dcdc;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>
